<!--
 * @Author: your name
 * @Date: 2021-08-12 09:40:29
 * @LastEditTime: 2021-08-12 11:06:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day09\01-定位布局.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局</title>
    <style>
        body>div{
            border:10px solid red;
            width:300px;
            margin:20px;
        }
        body>div:nth-child(1){
            /* 静态定位，默认文档流，不要搭配定位的方位名词 */
            position:static;
            margin-top:30px;
            margin-left:30px;
        }
        body>div:nth-child(2){
            position:relative;
            margin-top:10px;
        }
        body>div:nth-child(3){
            position:absolute;
            top:10px;
            height: 1200px;
        }
        .fu{
            /* float没有z-index概念 */
            width:200px;
            float:left;
            margin-left:30px;
            position:relative;
        }
        .last{
            top:30px;
        }
        #gu{
            width:200px;
            height:300px;
            background-color: rgba(255,0,0,0.3);
            position:fixed;
            z-index:10000;
        }
        #back{
            width:60px;
            height:60px;
            background-color: coral;
            position: fixed;
            left:200px;
            bottom:500px;
        }
        #nav{
            border:10px solid yellow;
            position:sticky;
            position:-webkit-sticky;
            top:0;
        }
    </style>
</head>
<body>
    <div>静态定位</div>
    <div>相对定位</div>
    <div>绝对定位</div>
    <div>普通内容
        <div id=nav>粘性定位</div>
    </div>
    
    <div class=fu>浮动布局</div>
    <div class=fu>浮动布局</div>
    <div class=fu>浮动布局</div>
    <div class=fu>浮动布局</div>
    <div class=fu>浮动布局</div>
    <div class=fu>浮动布局</div>
    <div class=fu>浮动布局</div>
    <div class=fu>浮动布局</div>
    <div class=fu>浮动布局</div>
    <div class=fu>浮动布局</div>
    <div class=fu last>浮动布局</div>
    <div id=gu>固定定位</div>
    <div>模拟网页内容很多</div>
    <div id=back>返回顶部</div>
</body>
</html>